<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
    <th:block th:include="include :: head('使用bootstrap4风格')" />

    <!--    <style>
            .error{
                color:red;
            }
        </style>-->
</head>
<body>
    <form method="get" class="cmxform needs-validation " id="form1" action="" novalidate=true>
        <div class="form-row">
            <div class="col-md-4 mb-3 form-group">
                <label for="user">用户名</label>
                <input id="user" name="user" required minlength="3" class="form-control">
            </div>
        </div>
        <div class="form-row">
            <div class="col-md-4 mb-3 form-group">
                <label for="password">密码</label>
                <input id="password" type="password" maxlength="12" name="password" class="form-control" required minlength="5">

            </div>

        </div>
        <div class="form-row">
            <div class="col-md-4 mb-3">
                <input class="submit btn btn-primary" type="submit" value="Login">
                <input class="cancel btn btn-danger" type="button" value="Reset">
            </div>

        </div>




    </form>
    <div th:replace="include :: footer"></div>
    <script>
//        $.validator.setDefaults({
//            errorElement: "em",
//            errorClass: "is-invalid",
////            errorClass: "has-error",
////            errorElement: 'div',
////            errorClass: 'invalid-feedback',
////            highlight: function (element, errorClass, validClass) {
////                $(element).parent().addClass(errorClass).removeClass(validClass);
////                $(element).next("em").addClass("fa-times").removeClass(" fa-check");
////            },
//
//            submitHandler: function () {
//                alert("提交事件!");
//            }
//        });
        $.validator.setDefaults({
            highlight: function (element) {
                $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
                $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

            },
            errorElement: 'em',
            errorClass: 'invalid-feedback',
            errorPlacement: function (error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            },
            invalidHandler: function (event, validato) {
                $(validato.currentForm).addClass('was-validated');
            },
            submitHandler: function (form) {
                alert("提交事件!");
            }
        });
        $().ready(function () {
            // 提交时验证表单
            var that = $("#form1");
            var validator = $("#form1").validate({

                messages: {
                    user: {
                        required: " (必需字段)",
                        minlength: " (不能少于 3 个字母)"
                    },
                    password: {
                        required: " (必需字段)",
                        minlength: " (字母不能少于 5 个且不能大于 12 个)",
                        maxlength: " (字母不能少于 5 个且不能大于 12 个)"
                    }
                }
            });

            $(".cancel").click(function () {
//                alert("cancel")
                validator.resetForm();
            });
        });
    </script>

</body>
</html>